"use client"
import Image from "next/image";
import Link from "next/link";
import {Divider} from "@nextui-org/divider";
import {HiArrowRight} from "react-icons/hi";

export default function Page() {
    return (
        <div>
            <AppsNavBar/>
            <Divider/>
            <BusinessSection/>
            <FeaturesSection/>

        </div>
    )
}


const apps = [
    {
        label: 'DevEco Studio',
        image: '/images/dev/nav_deveco_studio.png',
        link: '#'
    }, {
        label: 'ArkTS',
        image: '/images/dev/nav_arkts.png',
        link: '#'

    }, {
        label: 'ArkUI',
        image: '/images/dev/nav_arkui.png',
        link: '#'

    }, {
        label: 'ArkCompiler',
        image: '/images/dev/nav_arkcompiler.png',
        link: '#'

    }, {
        label: 'DevEco Testing',
        image: '/images/dev/nav_deveco_testing.png',
        link: '#'

    },
]

function AppsNavBar() {

    return (<div className={"flex items-center gap-x-10 justify-center py-6"}>

        {
            apps.map((item, index) => <Link href={item.link} key={index}
                                            className={"flex gap-x-2 items-center cursor-pointer"}>
                <Image src={item.image} alt={item.label} width={60} height={60} className={"h-[60px] w-[60px]"}/>
                {
                    item.label
                }
            </Link>)
        }
    </div>)

}


const businessItems = [
    {
        title: '入口更丰富',
        cover: '/images/dev/img_DLP_jiazhi_1.png',
        description: '通过1+8+N全场景生态，为伙伴带来10亿+硬件入口、100+系统级入口以及海量APP入口。'
    }, {
        title: '分发更智能',
        cover: '/images/dev/img_DLP_jiazhi_2.png',
        description: '精准场景感知、统一全局意图、细分服务闭环助力实现更精准的服务分发。'
    }, {
        title: '转化更高效',
        cover: '/images/dev/img_DLP_jiazhi_3.png',
        description: '相比传统模式，HarmonyOS 原子化服务将合作伙伴的用户转化率提升上百倍。'
    },
]

function BusinessSection() {

    return (
        <div className={"py-20 max-w-7xl mx-auto"}>
            <div className={"text-5xl pb-20"}>商业价值</div>
            <div className={"grid grid-cols-12 gap-10"}>
                {
                    businessItems.map((item, index) =>

                        <div key={index} className={"col-span-12 md:col-span-4 flex flex-col justify-center items-center gap-y-6"}>
                            <Image src={item.cover} alt={'cover'} className={"h-[120px] w-[120px]"} height={120}
                                   width={120}/>
                            <p className={"text-3xl"}>{item.title}</p>
                            <p className={"text-[#909090] text-center"}>{item.description}</p>
                        </div>
                    )
                }
            </div>
        </div>
    )
}


const features = [
    {
        title: '万能卡片',
        cover: '/images/dev/img_DLP_guanjiannengli_1.png',
        description: '用户可以在 HarmonyOS 桌面上放置万能卡片达到快速访问应用信息的目的。'
    }, {
        title: '分布式能力',
        cover: '/images/dev/img_DLP_guanjiannengli_2.png',
        description: 'HarmonyOS 提供分布式软总线、分布式设备虚拟化、分布式数据管理、分布式任务调度等分布式能力。'
    }, {
        title: '工具IDE',
        cover: '/images/dev/img_DLP_guanjiannengli_3.png',

        description: '为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用开发服务。'
    }, {
        title: 'HMS Core',
        cover: '/images/dev/img_DLP_guanjiannengli_4.png',

        description: 'HMS Core 提供端、云开放能力，帮助开发者实现应用高效开发、快速增长'
    },
]

function FeaturesSection() {

    return (
        <div className={"bg-[#f5f7fa]"}>
            <div className={"max-w-7xl mx-auto"}>
                <div className={"text-5xl py-20"}>关键能力</div>
                <div className={"grid grid-cols-12 gap-6"}>
                    {
                        features.map((item, index) =>
                            <div
                                key={index}
                                className={"col-span-12 md:col-span-3 rounded-xl overflow-hidden bg-white hover:shadow-2xl flex flex-col p-8 gap-y-6 group hover:scale-[1.02] transition-all"}>
                                <Image src={item.cover} alt={'cover'} className={"h-[120px] w-[120px]"} height={120}
                                       width={120}/>
                                <p className={"text-3xl"}>{item.title}</p>
                                <p className={"text-[#909090] h-[80px]"}>{item.description}</p>
                                <div className={"flex justify-end"}>
                                    <div
                                        className={"bg-[#f8f8f8] flex justify-center items-center group-hover:bg-black group-hover:text-white transition-all rounded-full h-[50px] w-[50px]"}>
                                        <HiArrowRight size={20}/>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                </div>
            </div>

        </div>
    )
}
